<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
// import { changePwd2Api } from "./api";

export default {
  name: "Concat",
  components: {},
  setup() {
    const state = reactive({
      servicePhone: "+86-755-82789938",
      onCallPhone: "+86-13603002768",
    });

    const ButtonConfig = [
      {
        url: "https://mp.weixin.qq.com/s/umEz061_o-mabzZ5NPWdxg",
        title: "常见问题",
      },
      {
        url: "https://mp.weixin.qq.com/s/zFOxVQC4hSdjjX0uTsNvng",
        title: "操作指南",
      },
    ];
    const { navigateTo } = useTzRouter();
    const toWebPage = (config) => {
      if (!config) return;
      navigateTo({
        path: "/pages/subUser/webPage/index",
        query: config,
      });
    };

    const btnRender = () => {
      return ButtonConfig.map((item) => (
        <tz-button
          class="navigate-btn"
          type="primary"
          onClick={() => toWebPage(item)}
        >
          {item.title}
        </tz-button>
      ));
    };

    const handleCall = (phoneNumber) => {
      Taro.makePhoneCall({
        phoneNumber,
      }).catch((err) => {
        console.warn(err);
      });
    };
    return () => {
      return (
        <tz-view class="concat">
          <tz-view class="phone-info">
            <tz-view class="phone-info-label">方法介绍</tz-view>
            <tz-view class="phone-info-item">
              <tz-view class="item-num">
                <tz-view class="num-icon">1</tz-view>
                拨打客服电话:
              </tz-view>
              <tz-view
                class="phone-num"
                onClick={() => handleCall(state.servicePhone)}
              >
                {state.servicePhone}
              </tz-view>
            </tz-view>
            <tz-view class="phone-info-item">
              <tz-view class="item-num">
                <tz-view class="num-icon">2</tz-view>
                拨打值班电话:
              </tz-view>
              <tz-view
                class="phone-num"
                onClick={() => handleCall(state.onCallPhone)}
              >
                {state.onCallPhone}
              </tz-view>
            </tz-view>
          </tz-view>
          <tz-view class="btn-block">{btnRender()}</tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.concat {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  position: relative;
  .phone-info {
    margin-top: 16px;
    display: inline-block;
    line-height: 30px;
    position: relative;
    .phone-info-label {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-120%, 0);
      font-size: 16px;
    }
    .phone-info-item {
      font-size: 18px;
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }
      .phone-num {
        color: $primary-color-active;
      }
      .item-num {
        display: flex;
        align-items: center;
        .num-icon {
          width: 24px;
          height: 24px;
          margin-right: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          border: 1px solid $border-color;
        }
      }
    }
  }
  .btn-block {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 26px;
    .navigate-btn {
      width: 345px;
      margin-top: 20px;
      height: 44px;
    }
  }
}
</style>
